<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery发送ajax get/post</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            let url = "http://localhost:8080/lishuoboy_javaweb_war_exploded/AjaxServlet";

            /*
            $.ajax方法
            url          表示请求的地址
            type         表示请求的类型GET或POST请求
            data         表示发送给服务器的数据。格式有两种:
                            一: name=value&name=value
                            二: {key:value}
            success      请求成功，响应的回调函数
            dataType     响应的数据类型。常用的数据类型有:json表示json对象、text、xml
            */
            $("#ajax").click(function () {
                    $.ajax({
                        url: url,
                        // data: "name=硕",
                        data: {"name": "硕"},
                        // type: "GET",
                        type: "POST",
                        success: function (data) {
                            let jsonObj = data; // 普通对象转json对象
                            $("#t1").val(JSON.stringify(jsonObj));
                            $("#t2").val("编号：" + jsonObj.id + " , 信息：" + jsonObj.msg);
                        },
                        dataType: "json"
                    })
                }
            )
            /*
            $.get 和 $.post 方法
            url          表示请求的地址
            data         表示发送给服务器的数据。格式有两种:
                            一: name=value&name=value
                            二: {key:value}
            success      请求成功，响应的回调函数
            dataType     响应的数据类型。常用的数据类型有:json表示json对象、text、xml
            */
            $("#get").click(function () {
                    $.get({
                        url: url,
                        // data: "name=硕",
                        data: {"name": "硕"},
                        success: function (data) {
                            let jsonObj = data; // 普通对象转json对象
                            $("#t1").val(JSON.stringify(jsonObj));
                            $("#t2").val("编号：" + jsonObj.id + " , 信息：" + jsonObj.msg);
                        },
                        dataType: "json"
                    })
                }
            )
            /*
            $.get 和 $.post 方法
            url          表示请求的地址
            data         表示发送给服务器的数据。格式有两种:
                            一: name=value&name=value
                            二: {key:value}
            success      请求成功，响应的回调函数
            dataType     响应的数据类型。常用的数据类型有:json表示json对象、text、xml
            */
            $("#post").click(function () {
                    $.post({
                        url: url,
                        // data: "name=硕",
                        data: {"name": "硕"},
                        success: function (data) {
                            let jsonObj = data; // 普通对象转json对象
                            $("#t1").val(JSON.stringify(jsonObj));
                            $("#t2").val("编号：" + jsonObj.id + " , 信息：" + jsonObj.msg);
                        },
                        dataType: "json"
                    })
                }
            )
            /*
            $.getJSON 方法
            url          表示请求的地址
            data         表示发送给服务器的数据。格式有两种:
                            一: name=value&name=value
                            二: {key:value}
            success      请求成功，响应的回调函数
            */
            $("#getJSON").click(function () {
                    $.getJSON({
                        url: url,
                        // data: "name=硕",
                        data: {"name": "硕"},
                        success: function (data) {
                            let jsonObj = data; // 普通对象转json对象
                            $("#t1").val(JSON.stringify(jsonObj));
                            $("#t2").val("编号：" + jsonObj.id + " , 信息：" + jsonObj.msg);
                        },
                    })
                }
            )
        })

    </script>
</head>
<body>
<div>
    <button id="ajax">jQuery.ajax</button>
    <button id="get">jQuery.get</button>
    <button id="post">jQuery.post</button>
    <button id="getJSON">jQuery.getJSON</button>
</div>
<br>
<textarea id="t1" style="width: 200px;height: 100px;">textarea1</textarea>
<textarea id="t2" style="width: 200px;height: 100px;">textarea2</textarea>
<div id="div1"></div>
</body>
</html>